<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片剪切</title>
<script type="text/javascript" src="../common/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../common/js/jquery.form.min.js"></script>
<script src="../common/jcrop/js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="../common/jcrop/css/jquery.Jcrop.css" type="text/css" />
</head>
<body>

<div class='AdminContent MainForm'>
<form id="form_portrait" action="action/controller?action=uploadimage&path=temp" method="POST" enctype="multipart/form-data">
	<table width='100%'>
	<tr>
		<th >图片文件：</th>		
		<td><input type='file' name='upfile' id='f_portrait' size='30'/> 
		<input type='submit' id='btn_preview' value='上传' class='BUTTON SUBMIT'/></td>
	</tr>
	</table>
    <div id="NewPortrait"><img id="f_portrait_temp" src="" style='display:none;' /></div>
    <div id='btn_saves' style='display:none;'>
        <input type='button' value='保存选中区域' id='btn_save_region' class='BUTTON SUBMIT'/>
        <input type='button' value='保存全图' id='btn_save_all' class='BUTTON SUBMIT'/> 选择“保存全图”头像可能会变形
    </div>
</form>
</div>

<form id='form_save' action="${Domain.my}admin/saveportrait" style='display:none;'>
    <input type='hidden' id='img_startX' name='startX' value='0'/>
    <input type='hidden' id='img_startY' name='startY' value='0'/>
    <input type='hidden' id='img_endX' name='endX' value='0'/>
    <input type='hidden' id='img_endY' name='endY' value='0'/>
    <input type='hidden' id='img_src' name='src' />
    <input type='hidden' id='img_path' name='path' value="avatar" />
    <input type='hidden' id='img_name' name='name' value="default" />
</form>

<script type='text/javascript'>

$(document).ready(function() {


	  $('#btn_save_region').click(function(){
	      
	     $.post(
	    	'action/controller/imgcut',
	      	{ startX: $("#img_startX").val(), 
	      	  startY: $("#img_startY").val(),
	      	   endX:$("#img_endX").val(),
	      	   endY:$("#img_endY").val(),
	      	   path:$("#img_path").val(),
	      	   name:$("#img_name").val(),
	      	   size:300,
	      	  	src:$("#img_src").val()
	      	  },
	      	 function(json){
					
		        	  alert(json);
		      });
	    });

	  $('#btn_save_all').click(function(){
	      	$.post('action/controller/imgcut',
	      	{
	      	    path:"avatar",
	      	    name:$("#img_name").val(),
	      	    size:300,
	      	  	src:$("#img_src").val()
	      	   },
	      	function(json){
					
	        	  alert(json);        	  
	    		
	    	});
	    });
	
	 $('#form_portrait').ajaxForm({
			dataType: 'json',
	        success: function(json) {
		    
				if(json.url){		
				    $('#img_src').val(json.url);
					
					$('#f_portrait_temp').attr("src",json.url + "?r="+Math.random());
					$('#f_portrait_temp').show();
					$('#f_portrait_temp').ready(function(){				
	                	$('#f_portrait_temp').Jcrop({
	                		setSelect: [ 10, 10, 210, 210 ],
	                		aspectRatio: 1,
	                    	onChange: showCoords,
	                    	onSelect: showCoords
	                	});
						$('#btn_saves').show();
					});
					//隐藏“上传”按钮
					$("#btn_preview").hide();
				}
				else if(json.msg)
	        		alert(json.msg);
	        }
	    });
		
		$("#form_portrait").ajaxStart(function(){
		  	$('#btn_preview').val('正在上传，请稍后...');
		  	$('#btn_preview').attr('disabled',true);
	    });
		$("#form_portrait").ajaxComplete(function(event,request, settings){
		  	$('#btn_preview').val('上传');
		  	$('#btn_preview').attr('disabled',false);
	    }); 
	
		
});

function showCoords(c){
	$('#img_startX').val(c.x);
	$('#img_startY').val(c.y);
	$('#img_endX').val(c.w+c.x);
	$('#img_endY').val(c.h+c.y);
};

</script>

</body>
</html>